<!-- 药店详情 -->
<template>
  <div class="vue-box submit-box--dialog" style="width: 1000px;">
      <!-- ------- 内容部分 ------- -->
      <div class="c-card">
          <el-form label-width="12em" label-position="top" >
              <el-row >
                  <el-col :span="8">
                      <show-info name="定点零售药店名称">{{ state.model.fixmedins_name }}</show-info>
                  </el-col>
                  <el-col :span="8">
                      <show-info name="定点零售药店编码">{{ state.model.fixmedins_code }}</show-info>
                  </el-col>
                  <el-col :span="8">
                      <show-info name="负责人姓名" :value="state.model.Director" ></show-info>
                  </el-col>
                  <el-col :span="8">
                      <show-info name="负责人手机号" :value="state.model.fixmedins_phone" ></show-info>
                  </el-col>
                  <el-col :span="8">
                      <show-info name="医疗服务机构类型" type="dict" dictName="fixmedins_type" :value="state.model.fixmedins_type"></show-info>
                  </el-col>
              </el-row>
              
          </el-form>
          
      </div>
      <div class="c-card">
          <el-tabs
              v-model="tabActive"
              type="card"
              class="margin-top"
          >
              <el-tab-pane label="零售药店资质" name="first">
                  <div class="aic pic-tab">
                      <div class="item" :class="{active: certificate.active == index}" v-for="(item,index) in certificate.picCfg" :key="index" @click="certificate.active = index">{{ item.name }}</div>
                  </div>
                  <div class="pic-box margin-top-lg">
                      <el-image
                       v-for="(item,index) in certificate.picCfg[certificate.active].list"
                          :key="index"
                          style="width: 100px; height: 100px;margin-right: 10px;"
                          :src="item"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="certificate.picCfg[certificate.active].list"
                          :initial-index="index"
                          fit="cover"
                          />
                  </div>
              </el-tab-pane>
              <el-tab-pane label="零售药店药师" name="second">
                  <com-table rowKey="OnlineInquiryNo" :tableData="doctors.tableData" :tableCfg="doctors.tableCfg" :showPagin="false" :showOperation="false">
                  </com-table>
              </el-tab-pane>
          </el-tabs>
      </div>
  </div>
</template>

<script setup name="sys-user-info">
import {onMounted, reactive, ref} from "vue";
import comTable from '@/sa-frame/com/table/table.vue'

// 获取插值 
const prop = defineProps({
  param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
  id: prop.param.id || 0,   // 获取传值id （0=添加，非0=修改）
  model: {},  // 数据 Model
})
const tabActive = ref('first')
// 医疗机构资质证书信息
const certificate = reactive({
  active: 0,
  picCfg: [{
        name: '法人身份证',
        key: 'FrontAccessoryUrl',
        list: []
    },{
        name: '营业执照',
        key: 'BusinessLicenseAccessoryUrl',
        list: []
    },{
        name: '药品经营许可证',
        key: 'DrugBLAccessoryUrl',
        list: []
    },{
        name: '医疗器械经营许可证',
        key: 'MedicalDeviceBLAccessoryUrl',
        list: []
    },{
        name: 'GS认证证书',
        key: 'GSCertificateAccessoryUrl',
        list: []
    },{
        name: '开户许可证',
        key: 'AccountLicenceAccessoryUrl',
        list: []
    }]
})

// 医疗机构医师数据
const doctors = reactive({
  tableData: [],
  tableCfg: [
{
  label: '药师姓名',
  prop: 'dr_name',
},
{
  label: '药师编号',
  prop: 'dr_code',
},
{
  label: '性别',
  prop: '',
},
{
  label: '联系电话',
  prop: 'dr_phone'
},
{
  label: '职业资格证',
  prop: 'age'
},
{
  label: '创建时间',
  prop: 'CreateDT'
}
]
})
// 组件加载时触发
onMounted(() => {
  f5();
})

// ------------------ 函数 ------------------
// 查询 
const f5 = function () {
  const params = {
      MedinsinfoId: state.id
  }
  sa.ajax('/api/webPresAdmin/pharmacyDetail?MedinsinfoId=',params, function (res) {
      let data = res.data;
      if(!res.data) {
          return sa.alert('数据不存在');
      }
      certificate.picCfg[0].list = data.FrontAccessoryUrl.split(',').concat(data.BackAccessoryUrl.split(','));
      certificate.picCfg[1].list = data.BusinessLicenseAccessoryUrl.split(',');
      certificate.picCfg[2].list = data.DrugBLAccessoryUrl.split(',');
      certificate.picCfg[3].list = data.MedicalDeviceBLAccessoryUrl.split(',');
      certificate.picCfg[4].list = data.GSCertificateAccessoryUrl.split(',');
      certificate.picCfg[5].list = data.AccountLicenceAccessoryUrl.split(',');
      state.model = res.data;
      doctors.tableData = res.data1
  })
}

</script>

<style scoped lang="scss">
@use "@/sa-frame/sa.scss" as *;

.c-item{
  margin-bottom: 15px;
}
.pic-tab{
  .item{
      background: #f2f3f5;
      padding: 5px 20px;
      border-radius: 5px;
      margin-right: 10px;
      cursor: pointer;
      &:hover{
          color: $primary;
      }
      &.active{
        background: $primary;
        color: #fff;
      }
  }
}
.pic-box{
  min-height: 280px;
}
</style>
